<template>
  <div id="cont" class="tab-detail">
    <div>
      <Form ref="form" :rules="formValidate" :label-width="140" :model="form">
        <Row
          wrap
          style="align-items: flex-start;margin-bottom:5px;display:block"
        >
          <Col :lg="8" :xs="24">
            <FormItem prop="image" :label-width="50">
              <div class="detail-image-box">
                <viewer :images="detail.image">
                  <img
                    style="max-width:100%;max-height:230px"
                    :src="detail.image"
                    alt=""
                    readonly
                  />
                </viewer>
              </div>
            </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
            <FormItem label="编号" prop="sn">
              <Input v-model="detail.sn" readonly />
            </FormItem>
            <FormItem label="型号" prop="model">
              <Input v-model="detail.model" readonly />
            </FormItem>
            <FormItem label="供应商" prop="supplier">
              <Input v-model="detail.supplier" readonly />
            </FormItem>
            <FormItem label="风阻系数" prop="dragCoefficient">
              <Input
                type="number"
                v-model.number="detail.dragCoefficient"
                style="width:100%"
                :max="1"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="迎风面积(m^2)" prop="frontalArea">
              <Input
                type="number"
                v-model.number="detail.frontalArea"
                style="width:100%"
                :max="100"
                :min="0"
                readonly
              />
            </FormItem>

            <FormItem label="整备质量(t)" prop="curbWeight">
              <Input
                type="number"
                v-model.number="detail.curbWeight"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="半载质量(t)" prop="lvw">
              <Input
                type="number"
                v-model.number="detail.lvw"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
            <FormItem label="满载质量(t)" prop="gvw">
              <Input
                type="number"
                v-model.number="detail.gvw"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="轴距(m)" prop="wheelBase">
              <Input
                type="number"
                v-model.number="detail.wheelBase"
                style="width:100%"
                :max="100"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="空载质心高度(mm)" prop="curbCentroidHeight">
              <Input
                type="number"
                v-model.number="detail.curbCentroidHeight"
                style="width:100%"
                :max="3000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="半载质心高度(mm)" prop="lvwCentroidHeight">
              <Input
                type="number"
                v-model.number="detail.lvwCentroidHeight"
                style="width:100%"
                :max="3000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="满载质心高度(mm)" prop="gvwCentroidHeight">
              <Input
                type="number"
                v-model.number="detail.gvwCentroidHeight"
                style="width:100%"
                :max="3000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="油箱容积(L)" prop="tankVolume">
              <Input
                type="number"
                v-model.number="detail.tankVolume"
                style="width:100%"
                :max="3000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem :label-width="30">
              其他人是否可见
              <i-switch
                v-model="detail.isIndexShow"
                :true-value="1"
                :false-value="0"
                disabled
              />
              其他人是否可用
              <i-switch
                v-model="detail.otherCanUse"
                :true-value="1"
                :false-value="0"
                disabled
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
import { bodyApi } from "@/api/body";
export default {
  name: "BodyDetail",
  components: {},
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      id: null,

      detail: null, // 发动机详情
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "change" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "change" }],

        // 风阻系数
        dragCoefficient: [
          {
            type: "number",
            required: true,
            message: "请输入风阻系数",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 1,
            message: "请输入0到1的数字",
            trigger: "change"
          }
        ],
        // 迎风面积(m^2)
        frontalArea: [
          {
            type: "number",
            required: true,
            message: "请输入迎风面积(m^2)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        lvw: [
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        // 整备质量(t)
        curbWeight: [
          {
            type: "number",
            required: true,
            message: "请输入整备质量(t)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        // 满载质量(t)
        gvw: [
          {
            type: "number",
            required: true,
            message: "请输入满载质量(t)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        // 轴距(m)
        wheelBase: [
          {
            type: "number",
            required: true,
            message: "请输入轴距(m)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        // 空载质心高度(mm)
        curbCentroidHeight: [
          {
            type: "number",
            required: true,
            message: "请输入空载质心高度(mm)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        lvwCentroidHeight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        gvwCentroidHeight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        tankVolume: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      }
    };
  },
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取发动机详情数据
    getDetail() {
      bodyApi.getById(this.id).then(res => {
        this.detail = res.data;
      });
    }
  }
};
</script>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
